<template>
  <div id="paymentRule_queryTemplate">
      
        <!-- form -->
        <el-form :model="queryform" :status-icon="true" :show-message="false" :inline="true" ref="queryform" label-width="100px" class="demo-ruleForm" style="display:none;">
                    
            <el-row>
                <el-col :span="11" >
                    <el-form-item label="商户主键" prop="id">	
                        <el-input v-model="queryform.id" ></el-input>
                    </el-form-item>	
                </el-col>

                <el-col :span="11">
                    <el-form-item label="商户代码" prop="mchCode">
                         <el-input v-model="queryform.mchCode" ></el-input>
                    </el-form-item>
                </el-col>

                <el-col :span="11">
                    <el-form-item label="商户名称" prop="mchName">
                        <el-input v-model="queryform.mchName" ></el-input>
                    </el-form-item>
                </el-col>
                
            </el-row>
        </el-form>

        <!--  顶部标签按钮组件 -->
		<el-row class="top-row-btn" > 
		
			<!-- 查询工具栏-->
			<el-col :span="14"  class="query" style="text-align: left;"> 
			<div  class="el-input el-input--small el-input-group el-input-group--append">
				<input v-model="tableParams.searchValue" autocomplete="off" placeholder="请输入内容" size="small" type="text" rows="2" validateevent="true" class="el-input__inner">
				<div class="el-input-group__append" @click="search">
				<i  class="el-icon-search"></i>
				</div>
			</div>
			<el-button type="primary" title="取消" size="small"  @click="submitSearchBtn('false')">清空查询条件</el-button>
			</el-col> 
		</el-row>

		<!-- 渲染table数据-->
		<div class="tableOrPageSort">
			<el-row> 
				<el-col :span="24" class="singleTableStyle">
					<el-table  ref="payMerchantTable" v-loading="loading" element-loading-text="拼命加载中" element-loading-spinner="el-icon-loading"   highlight-current-row
					element-loading-background="#fff" :data="payMerchantTable" :default-sort = "{prop: 'date', order: 'descending'}"  border id="payMerchantTable"  size="medium" 
					style="width:100%"   @row-click="rowClickThis" :row-class-name="tableRowClassName"  >

						<el-table-column  type="index" :index="indexMethod" label="序号" width="50"></el-table-column>
						<el-table-column  prop="id" label="商户主键" width="" sortable show-overflow-tooltip ></el-table-column>
						<el-table-column  prop="mchCode" label="商户代码" width="" sortable show-overflow-tooltip></el-table-column>
						<el-table-column  prop="mchName" label="商户名称" width="" sortable show-overflow-tooltip></el-table-column>

					</el-table>
				</el-col>
			</el-row>

			<!-- 分页及页数选择 -->
			<el-row v-show="isShow" class="sort-page">
				<el-col :span="24" >
				<el-pagination
					background
					@size-change="handleSizeChange"
					@current-change="handleCurrentChange"
					:current-page="currentPage"
					:page-sizes="[ 10, 20, 50, 100]"
					:page-size="pageSizes"
					size="5"
					layout="total, sizes, next, pager, prev, jumper"
					:total="tableTotal">
				</el-pagination>
				</el-col>
			</el-row>

		</div>
  </div>

</template>

<script>
import treeSelect from "@/components/tree/treeSelect";
import gridSelect from "@/components/grid/gridSelect";
import dropSelect from "@/components/select/dropSelect";

import { mergeQuery,appendQueryParams,getDictLableName } from "@/utils/dataUtils";
import { getPayMerchantTable ,deleteAllPayMerchant,putPayMerchantExcel,getPayMerchant} from "@/views/modules/basicArchives/common/api/merchantFiles/payMerchantIndex";

export default {
  name:'paymentRules_rulesMerchantFilesTable',
  components: {
	  treeSelect,
	  gridSelect,
	  dropSelect
  },
  data() {
    return {
	   queryform: {id:undefined,mchCode:undefined,mchName:undefined},
	   submitSearch:undefined,//true 提交搜索，false 清空搜索条件
	   tableParams:{
          parentId: "1",
          pageNo : "1",
          pageSize : "10",
          reqCode : "1",
          orderBy : "",
          searchValue:""
		},

		// queryform : {},
		payMerchantTable: [],
        tableTotal : 100, //总长度
        currentPage : 1, //当前页数
		pageSizes : 10, //分页数量
		innerVisible: false,
		isShow : true,
		loading:false,  //加载遮罩层显示
    };
  },
  props: {
    innerSubmitSearch:{type:String,}
  },
  watch: {
    innerSubmitSearch: function(val) {
      if (val == "true") {
        this.$emit("query-data",this.queryform);
      }else if(val=="false"){
        this.$refs["queryform"].resetFields();
        setTimeout(()=>{
            this.$emit("refresh-quey-data",this.queryform);
            },200)
      };
      setTimeout(()=>{
        this.$emit("update:innerSubmitSearch","0");
      },200)
    },
  },
  methods:{
	search(){
        this.currentPage=1;
        this.submitSearch = "false";
        this.tableParams.pageNo="1";
        this.tableParams.pageSize="10";
        this.tableParams.reqCode="-1";
        this.getTableData(this.tableParams);
	},
	submitSearchBtn(parms){
		// console.log(parms);
		this.submitSearch = parms;
		if(parms == 'false'){
			this.tableParams.searchValue = '';
		}else{
			this.innerVisible = false;
			this.tableParams.searchValue = '';
			this.payMerchantTable=[];
		}

	},

	getTableData(queryParams) {
        //  ###
        getPayMerchantTable(queryParams).then(response => {
          //console.log('response : ',response);
          if(response.code==200){
            this.payMerchantTable = response.data.rows;
            this.tableTotal =  response.data.total;
            this.loading = false;
          }else{
            this.payMerchantTable=[];
            this.tableTotal = 0;
            this.loading = true;
            setTimeout(()=>{
              this.loading = false;
            },500)
          }
        });
	},

	
	
	//修改每页展示数据
	handleSizeChange(val) {
		this.pageSizes = val;
		this.tableParams.pageSize = this.pageSizes;
		var queryParamsVar = mergeQuery(this.tableParams,this.queryForm);
		this.getTableData(queryParamsVar);
	},
	
	//修改页码
	handleCurrentChange(val) {
		this.clearChoose();
		this.tableParams.pageNo = val 
		this.currentPage = val;
		this.tableParams.pageSize = this.pageSizes;
		var queryParamsVar = mergeQuery(this.tableParams,this.queryForm);
		this.getTableData(queryParamsVar);
	},

	indexMethod(index) { //计算table的序号
		var returnNum = (this.currentPage-1)*this.pageSizes+index+1;
		return returnNum;
	},

	//点击行checkbox选中,添加背景色
	rowClickThis(row, event, column) {
        this.queryform.id=row.id;
        this.queryform.mchCode=row.mchCode;
        this.queryform.mchName=row.mchName;
	},

	tableRowClassName({row, rowIndex}) {
		//把每一行的索引放进row
		row.index = rowIndex;
	},
	//去除背景色，去除勾选
	clearChoose() {
		this.$refs.payMerchantTable.clearSelection();
		// $('.el-table__row').removeClass("select-row");
	}
  }
};
</script>

<style lang="scss" scoped>
   .top-row-btn {
     margin-bottom: 10px;
	 
   }
</style>